<template>
  <div class="admin-list">
    <h2>题目管理</h2>
    
    <div v-if="loading" class="loading">
      加载中...
    </div>
    
    <div v-else-if="error" class="error">
      {{ error }}
      <button @click="fetchQuestions">重试</button>
    </div>
    
    <div v-else class="question-list">
      <div v-for="question in questions" :key="question._id" class="question-item">
        <div class="question-content">
          <h3>题目内容：</h3>
          <p>{{ question.content }}</p>
          
          <div v-if="question.imageUrl" class="image-container">
            <img :src="question.imageUrl" alt="题目图片" />
          </div>
          
          <div v-if="question.hint" class="hint">
            <strong>提示：</strong> {{ question.hint }}
          </div>

          <div class="answer">
            <h4>答案：</h4>
            <p>{{ question.answer }}</p>
          </div>

          <div class="meta">
            <span>创建时间：{{ formatDate(question.createDate) }}</span>
          </div>
        </div>

        <div class="actions">
          <button @click="deleteQuestion(question._id)" class="delete-btn">
            删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useQuestionStore } from '../stores/question'

const questionStore = useQuestionStore()
const questions = ref([])
const loading = ref(false)
const error = ref('')

// 格式化日期
function formatDate(dateStr) {
  const date = new Date(dateStr)
  return date.toLocaleString()
}

// 获取所有题目
async function fetchQuestions() {
  loading.value = true
  error.value = ''
  
  try {
    questions.value = await questionStore.getAllQuestions()
  } catch (err) {
    console.error('获取题目失败:', err)
    error.value = err.message
  } finally {
    loading.value = false
  }
}

// 删除题目
async function deleteQuestion(id) {
  if (!confirm('确定要删除这道题目吗？')) return
  
  try {
    await questionStore.deleteQuestion(id)
    await fetchQuestions() // 重新加载列表
    alert('删除成功')
  } catch (error) {
    alert('删除失败：' + error.message)
  }
}

onMounted(() => {
  fetchQuestions()
})
</script>

<style scoped>
.admin-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.question-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
}

.image-container {
  margin: 15px 0;
  text-align: center;
}

.image-container img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
}

.hint {
  margin: 15px 0;
  padding: 10px;
  background: #f8f8f8;
  border-left: 4px solid #42b983;
}

.answer {
  margin-top: 15px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.meta {
  margin-top: 10px;
  color: #666;
  font-size: 0.9em;
}

.actions {
  margin-top: 15px;
  text-align: right;
}

.delete-btn {
  padding: 8px 16px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn:hover {
  background: #ff0000;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error {
  color: #ff4444;
  padding: 20px;
  text-align: center;
  background: #fff3f3;
  border-radius: 4px;
  margin: 20px 0;
}

.error button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style> 